{% extends "../theme/bage.html" %}
{% block typebody %}
<div class="mtop">
    <ul class="breadcrumb">
        <li>{{ _('Current location') }}: <a href="{% module site_url() %}">{{ _('Home') }}</a></li>
        <li class="active">{{ _('Change Password') }}</li>
    </ul>
</div>
<div class="panel panel-black">
    <div class="panel-heading"><b> {{ _('Change Password') }} </b></div>
    <div class="panel-body">
        <form class="form-horizontal" action="/user/changepass" method="post" id="form_changepass">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="user_name">{{ _('User name') }}</label>

                <div class="col-sm-10">
                    <input type="text" name="user_name" id="user_name" class="form-control"
                           value="{{userinfo.user_name}}" readonly/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="rawpass">{{ _('Original password') }}</label>

                <div class="col-sm-10">
                    <input type="password" name="rawpass" id="rawpass" class="form-control"
                           placeholder="Please enter the original password"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="user_pass">{{ _('New password') }}</label>

                <div class="col-sm-10">
                    <input type="password" name="user_pass" id="user_pass" class="form-control" onchange="check_strength()"
                           placeholder="Please enter a new password"/>
                    <div class="progress" id="progress" style="display: none">
                        <div class="progress-bar progress-bar-danger" role="progressbar" id="progress25"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             style="width: 25%; display: none">
                            <span class="sr-only">25%</span>
                        </div>
                        <div class="progress-bar progress-bar-warning" role="progressbar" id="progress50"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             style="width: 25%;  display: none">
                            <span class="sr-only">50%</span>
                        </div>

                        <div class="progress-bar progress-bar-info" role="progressbar" id="progress75"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             style="width: 25%;  display: none">
                            <span class="sr-only">75%</span>
                        </div>

                         <div class="progress-bar progress-bar-success" role="progressbar" id="progress100"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             style="width: 25%;  display: none">
                            <span class="sr-only">100%</span>
                        </div>




                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="user_pass2">{{ _('Confirm password') }}</label>

                <div class="col-sm-10">
                    <input type="password" name="user_pass2" id="user_pass2" class="form-control"
                           placeholder="Please enter a confirmation password"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label"></label>

                <div class="col-sm-10">
                    <button type="submit" class="btn btn-primary">{{ _('Modify') }}</button>
                    <a href="/user/logout" class="btn btn-primary">{{ _('Logout') }}</a>
                </div>
            </div>
        </form>
    </div>
</div>
{% end %}

